<template>
  <div class="mine">
    <div class="minemsg" @click="mymsg">
      <img :src="userlist.avatarUrl" alt="" />
      <div class="minemsgleft">
        <p class="nickname">{{ userlist.nickname }}</p>
        <p>
          <span class="level">Lv:{{ level }}</span>
          <span></span>
        </p>
      </div>
    </div>

    <!-- <van-cell
      title="单元格"
      value="内容"
      label="描述信息"
      icon="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F06%2F20210306210053_b1fb1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638413967&t=c02207857cbeb4d864f91f5534c9fec2"
    /> -->

    <van-grid :column-num="4">
      <van-grid-item icon="music-o" text="本地/下载" color="red" />
      <van-grid-item icon="upgrade" text="云盘" />
      <van-grid-item icon="sign" text="已购" />
      <van-grid-item icon="play-circle-o" text="最近播放" />
      <van-grid-item icon="friends-o" text="我的好友" />
      <van-grid-item icon="star-o" text="收藏和赞" />
      <van-grid-item icon="bullhorn-o" text="电音专区" />
      <van-grid-item icon="service-o" text="DJ专区" />
    </van-grid>
    <div class="mylike" @click="mylove(userlist.userId)">
      <div class="mineleft">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F06%2F20210306210053_b1fb1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638413967&t=c02207857cbeb4d864f91f5534c9fec2"
          alt=""
        />
        <div class="lmylike">
          <p>我喜欢的音乐</p>
          <span>{{ mindlist.length }}首</span>
        </div>
      </div>
      <div class="mind"><van-icon name="like-o" />心动模式</div>
    </div>
    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item icon="" text="创建歌单" @click="creatlist(uid)" />
      <van-grid-item icon="" text="收藏歌单" @click="liststar(uid)" />
      <van-grid-item icon="" text="歌单助手" @click="listhelper(uid)" />
    </van-grid>
    <div class="songbox">
      <p>推荐歌单<van-icon name="replay" color="red" @click="reload" /></p>
      <div class="songlist">
        <div class="songimgbox" v-for="item in toplist" :key="item.id">
          <div class="songtag">
            <img
              :src="item.coverImgUrl"
              :title="item.name"
              @click="detail(item.id)"
            />
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { ImagePreview } from 'vant'

// ImagePreview([
//   'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F06%2F20210306210053_b1fb1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638413967&t=c02207857cbeb4d864f91f5534c9fec2',
// ])
import { getusermsgAPI, loginstatusAPI, playlistAPI } from "@/api/mine.js";
import axios from "axios";
export default {
  data() {
    return {
      toplist: [],
      mindlist: [],
      userlist: [],
      level: "",
      userid: "",
      uid: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    //跳转个人信息
    mymsg() {
      this.$router.push("/personal");
    },
    //跳转歌单详情
    detail(id) {
      this.$router.push(`/listdetail/${id}`);
    },
    // detail(id) {
    //   this.$router.push(`/songlistdetail/${id}`)
    // },
    //获取登录状态
    async loginstatus() {
      const result = await loginstatusAPI();
      console.log(result, "zfc");
      if (result.data.data.code === 200) {
        this.uid = result.data.data.profile.userId;
        this.userdetail(this.uid);
      } else {
        alert("请登录");
      }
    },
    //获取用户详情
    userdetail(uid) {
      axios
        .get("http://localhost:3000/user/detail", {
          params: {
            uid: uid,
          },
        })
        .then((res) => {
          console.log(res, "用户详情");
          if (res.status === 200) {
            this.userlist = res.data.profile;
            this.level = res.data.level;
          }
        });
    },
    //跳转创建歌单
    creatlist(id) {
      this.$router.push("/creatlist/" + id);
    },
    //跳转歌单收藏
    liststar(id) {
      this.$router.push("/liststar/" + id);
    },
    //跳转歌单助手
    listhelper(id) {
      this.$router.push("/listhelper/" + id);
    },
    //获取用户信息(喜欢的音乐，歌单，mv数量)
    async getusermsg() {
      const result = await getusermsgAPI();
      console.log(result, 888);
    },
    //获取歌单(网友精选碟)
    async playlist(params) {
      const result = await playlistAPI(params);
      console.log(result, "zfc22");
      if (result.status === 200) {
        this.toplist = result.data.playlists;
      }
    },
    //刷新推荐歌单
    reload() {
      const params = { limit: 10 };
      this.playlist(params);
    },
    //获取喜欢音乐列表
    getmindmusic() {
      const id = this.uid;
      axios
        .get("http://localhost:3000/likelist", {
          params: {
            uid: id,
          },
        })
        .then((res) => {
          console.log(res, 666);
          if (res.status === 200) {
            this.mindlist = res.data.ids;
          }
        });
    },
    //跳转喜欢音乐列表'1587708982'
    mylove(id) {
      this.$router.push("/mylove/" + id);
    },
  },
  created() {
    this.loginstatus();
    const id = this.uid;
    const params = { limit: 10 };
    this.playlist(params);
    this.getusermsg(id);
    this.getmindmusic();
    // this.userdetail()
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.mine {
  padding: 15px;
  padding-bottom: 65px;
}
.minemsg {
  padding: 0 15px;
  height: 45px;
  margin: 15px 0;
  background: white;
  border-radius: 15px;
  display: flex;
  align-items: center;
}
.minemsg img {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.minemsgleft {
  float: left;
}
.nickname {
  line-height: 25px;
  text-indent: 5px;
  font-size: 15px;
}
.minemsgleft span {
  text-align: center;
  line-height: 15px;
  float: left;
  width: 30px;
  height: 15px;
  border-radius: 15px;
  font-size: 12px;
}
.level {
  background-color: black;
  color: white;
  margin: 0 5px;
}
.mylike {
  padding: 10px;
  background-color: white;
  overflow: hidden;
  margin: 20px 0;
  border-radius: 15px;
}
.mineleft {
  float: left;
}
.mineleft img {
  float: left;
  width: 50px;
  height: 50px;
}
.mineleft .lmylike {
  float: right;
}
.mineleft .lmylike p {
  line-height: 30px;
}
.mineleft .lmylike span {
  font-size: 12px;
}
.mind {
  float: right;
  height: 25px;
  line-height: 25px;
  border: 1px solid #eeeeee;
  border-radius: 15px;
  font-size: 14px;
  width: 75px;
  text-align: center;
  margin-top: 10px;
}
.songimgbox {
  text-align: center;
  width: 100px;
  height: 100px;
  font-size: 12px;
  margin-left: 10px;
}
.songtag {
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}
.songimgbox p {
  width: 100px;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.songlist {
  width: 100%;
  height: 140px;
  display: flex;
  overflow-x: scroll;

  /* overflow-x: visible; */
}
.songbox {
  height: 180px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid #cccccc;
}
.songbox > p {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
.songlist-webkit-scrollbar {
  width: 0;
}
</style>
